<template>
    <GeneralOperationForm
        :navLists="navLists"
    >
        <template #default>
            <el-form 
                ref="ruleFormRef1"
                :model="formData1" 
                :rules="rules1"
                label-width="8vw"
                status-icon
                label-position="left"
            >
                <Section :list="navLists[0]" />
                <div class="edit-form-item">
                    <el-form-item 
                        label="福利院"
                        prop="welfare_org_name"
                    >
                        <GeneralSelect
                            v-model="formData1.welfare_org_name"
                            clearable
                            placeholder="请选择福利院"
                            :dictionary="GENERAL_REMOTE_OPTIONS[6]"
                        />
                    </el-form-item>    
                    <el-form-item 
                        label="姓名"
                        prop="name"
                    >
                        <el-input 
                            v-model="formData1.name" 
                            clearable
                            placeholder="请输入姓名"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="身份证号码"
                        prop="id_number"
                    >
                        <el-input 
                            v-model="formData1.id_number" 
                            clearable
                            placeholder="请输入身份证号码"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="出生日期"
                        prop="birthdate"
                    >
                        <el-date-picker
                            v-model="formData1.birthdate"
                            type="date"
                            clearable
                            value-format="YYYY-MM-DD"
                            :disabled-date="(time) => {
                                return time.getTime() > Date.now()
                            }"
                            placeholder="请选择出生日期"
                            style="width: 100%"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="性别"
                        prop="gender"
                    >
                        <GeneralSelect
                            v-model="formData1.gender"
                            clearable
                            placeholder="请选择性别"
                            :dictionary="GENERAL_REMOTE_OPTIONS[8]"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="学历"
                        prop="ethnicity"
                    >
                        <GeneralSelect
                            v-model="formData1.ethnicity"
                            clearable
                            placeholder="请选择学历"
                            :dictionary="GENERAL_REMOTE_OPTIONS[18]"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="专业"
                        prop="hukou_address"
                    >
                        <el-input 
                            v-model="formData1.hukou_address" 
                            clearable
                            placeholder="请输入专业"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="职称"
                        prop="hukou_category"
                    >
                        <GeneralSelect
                            v-model="formData1.hukou_category"
                            clearable
                            placeholder="请选择职称"
                            :dictionary="GENERAL_REMOTE_OPTIONS[19]"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="岗位性质"
                        prop="health_status"
                    >
                        <GeneralSelect
                            v-model="formData1.health_status"
                            clearable
                            placeholder="请选择岗位性质"
                            :dictionary="GENERAL_REMOTE_OPTIONS[20]"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="职业岗位"
                        prop="disease_types"
                    >
                        <GeneralSelect
                            v-model="formData1.disease_types"
                            multiple
                            collapseTags
                            collapseTagsTooltip
                            clearable
                            placeholder="请选择职业岗位"
                            :dictionary="GENERAL_REMOTE_OPTIONS[21]"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="是否法人"
                        prop="is_hukou_registered"
                    >
                        <GeneralSelect
                            v-model="formData1.is_hukou_registered"
                            clearable
                            placeholder="请选择是否法人"
                            :options="GENERAL_OPTIONS_1"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="联系方式"
                        prop="address"
                    >
                        <el-input 
                            v-model="formData1.address" 
                            clearable
                            placeholder="请输入联系方式"
                        />
                    </el-form-item>
                </div>
                <!-- <div class="edit-form-item">
                    <el-form-item 
                        v-for="(item, index) in formData1.attachments"
                        :key="`attachments-${index}`"
                        label-width="0"
                        prop="attachments"
                    >
                        <FormUploadImage 
                            v-model:imageStr="item.attachmentName"
                            :title="item.attachmentTitle"
                        />
                    </el-form-item>
                </div> -->
            </el-form>
        </template>
        <template #footer>
            <el-button 
                type="primary"
                @click="onSubmit1(ruleFormRef1)"
            >
                保存
            </el-button>
        </template>
    </GeneralOperationForm>
</template>
  
<script lang="ts" setup>
    import { ref, reactive, markRaw, onBeforeMount, onMounted, onBeforeUnmount, nextTick, computed, watch } from 'vue'
    import type { Ref, Raw } from 'vue'
    import { useRoute, useRouter } from 'vue-router'
    import { storeToRefs } from 'pinia'
    import { useStore } from '@/store'
    import { ElMessage } from 'element-plus'
    import {
        Lock,
        User,
        Monitor,
        Phone,
        UploadFilled
    } from '@element-plus/icons-vue'
    import { 
        welfareorgsGetWelfareOrgsInfoApi, 
        welfareorgsAddChildInfoApi, 
    } from '@/apis'

    import { isPhone, isIDCard, dateFormatter } from '@/utils'
    import GeneralOperationForm from '@/components/generalOperationForm/GeneralOperationForm.vue'
    import Section from '@/components/section/Section.vue'
    import AdministrativeDivisionsCascader from '@/components/administrativeDivisionsCascader/AdministrativeDivisionsCascader.vue'
    import FormUploadImage from '@/components/formUploadImage/FormUploadImage.vue'
    import GeneralSelect from '@/components/generalSelect/GeneralSelect.vue'

    import { GENERAL_OPTIONS_1, GENERAL_REMOTE_OPTIONS } from '@/constants'

    const route = useRoute()
    const router = useRouter()
    const store = useStore()
    
    const dialogObj = defineModel<any>('dialogObj', {
        required: false,
        default: {}
    })
    const emits = defineEmits<{
        // (e: 'update:isCollapse', data: boolean): void,
        tabelSearch: [data?: any]
    }>()
    // 侧边栏
    const navLists:Ref<any[]> = ref([
        {
            text: '工作人员基本信息',
            id: 'nav-id-1',
            level: 1,
        },
    ])

    const ruleFormRef1 = ref<any>()
    const formData1: Ref<any> = ref({
        welfare_org_name: '',
        name: '',
        id_number: '',
        birthdate: '',
        gender: '',
        ethnicity: '',
        hukou_address: '',
        hukou_category: '',
        health_status: '',
        disease_types: '',
        is_hukou_registered: '',
        address: '',
        // attachments: [
        //     {
        //         attachmentName: '', //附件地址名称（多个中间用，分割）	
        //         attachmentTitle: '机构名称', //附件名称 （例如：身份证正面、身份证反面、学位证书、毕业证书、机构附件）
        //         entitySubType: '', //附件子类型枚举
        //         entitySubTypeName: '', //附件子类型名称
        //         id: '',
        //     }
        // ], //https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg,https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg
        
        created_at: '', //新增时间
        updated_at: '', //修改时间
    })
    const rules1 = reactive<any>({
        welfare_org_name: [
            { 
                required: true, 
                message: '请选择福利院！', 
                trigger: 'blur' 
            },
        ],
        name: [
            { 
                required: true, 
                message: '请输入姓名！', 
                trigger: 'blur' 
            },
        ],
        id_number: [
            { 
                validator: (rule: any, value: any, callback: any) => {
                    if (value) {
                        if (isIDCard(value)) {
                            callback()
                        } else {
                            callback(new Error('请输入正确的身份证号码'))
                        }
                    } else {
                        callback()
                    }
                }, 
                trigger: 'blur' 
            }
        ],
        birthdate: [
            { 
                required: true, 
                message: '请选择出生日期！', 
                trigger: 'blur' 
            },
        ],
        gender: [
            { 
                required: true, 
                message: '请选择性别！', 
                trigger: 'blur' 
            },
        ],
        ethnicity: [
            { 
                required: true, 
                message: '请选择学历！', 
                trigger: 'blur' 
            },
        ],
        hukou_address: [
            { 
                required: true, 
                message: '请输入专业！', 
                trigger: 'blur' 
            },
        ],
        hukou_category: [
            { 
                required: true, 
                message: '请选择职称！', 
                trigger: 'blur' 
            },
        ],
        health_status: [
            { 
                required: true, 
                message: '请选择岗位性质！', 
                trigger: 'blur' 
            },
        ],
        disease_types: [
            { 
                required: true, 
                message: '请选择职业岗位！', 
                trigger: 'blur' 
            },
        ],
        is_hukou_registered: [
            { 
                required: true, 
                message: '请选择是否法人！', 
                trigger: 'blur' 
            },
        ],
        address: [
            { 
                required: true, 
                message: '请输入联系方式！', 
                trigger: 'blur' 
            },
        ],
        // attachments: [
        //     { 
        //         validator: (rule: any, value: any, callback: any) => {
        //             console.log(value)
        //             if (value) {
        //                 callback()
        //             } else {
        //                 callback(new Error('请上传图片！'))
        //             }
        //         }, 
        //         trigger: 'blur' 
        //     },
        // ],
    })
  
    onMounted(() => {
        // if (dialogObj.value?.dialogParams.id) {
            welfareorgsGetWelfareOrgsInfoApi({
                id: dialogObj.value.dialogParams?.id ? dialogObj.value.dialogParams?.id : ''
            }).then((res: any) => {
                formData1.value = res.data
            })
        // }
    })

    const onSubmit1 = (formEl: any) => {
        if (!formEl) return;
        // console.log(formData1.value)
        formEl.validate((valid, fields) => {
            // console.log(valid)
            console.log(fields)
            if (valid) {
                // console.log('submit!')
                if (dialogObj.value?.dialogParams.id) {
                    formData1.value.updated_at = dateFormatter(new Date())
                } else {
                    formData1.value.created_at = dateFormatter(new Date())
                }
                welfareorgsAddChildInfoApi({
                    ...formData1.value
                }).then(res => {
                    emits('tabelSearch')
                    dialogObj.value.dialogVisible = false
                }).catch(err => {
                    // ElMessage({
                    //     type: 'error',
                    //     message: '系统异常，请稍后重试！',
                    // })
                })
            } else {
                // console.log('error submit!')
                ElMessage({
                    message: fields[Object.keys(fields)[0]][0].message,
                    type: 'warning',
                })
            }
        })
    }

    
</script>
  
<style lang="scss" scoped>
    .edit-form-item {
        @include edit-form-item;
        .form-item-width-1 {
            @include form-item-width-1;
        }
    }
</style>
